iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 24
2
Modern Web

實踐無障礙網頁設計(Web Accessibility)系列 第 24

實作無障礙網頁功能:無障礙定位點(導盲磚 `:::`)

  • 分享至 

  • xImage
  •  

這系列無障礙的鐵人賽文章,實踐的內容主要是根據 W3C:WAI-ARIA 的實踐,從設計模式及組件(Design Patterns and Widgets)裡面挑選最想嘗試的,如果有朋友想瞭解全部 Widget 該怎麼實作及其規範,歡迎自行爬規範內容,也許我們可以討論一下;若以下文章內容理解有任何錯誤,請多指教~

(圖片來源:人行道上,該不該放導盲磚? - 余虹儀

今天的實踐內容,並不是 WAI-ARIA 實踐的角色之一,是大家都在做政府網站都一定會需要知道的導盲磚。

無障礙定位點 (打開 NCC 無障礙空間服務網

如果大家沒聽過定位點,或是導盲磚這個功能的話,那麼首先,文章的第一 Part 要完全引用 NCC 對於無障礙定位點的說明:

所謂定位點(原名導盲磚),其顯示方式是利用三個冒號(:::)來代表,且需要搭配快速鍵設計來使用。

主要用途

主要用途在於幫助使用者快速定位及搜尋。

主要優點有以下:

  1. 快速跳躍至網頁不同區塊,可避免使用者迷失在網頁中。
  2. 方便使用者在各框架頁(frame)間快速移動。
  3. 可導引使用者依自己需要,跳至所需的區塊中。

定位點的設計程式碼如下

<a accesskey="L" href="intro.jsp" title="左側區域"> ::: </a>
<a accesskey="C" href="intro.jsp" title="中間區域"> ::: </a>
<a accesskey="R" href="intro.jsp" title="右側區域"> ::: </a>

title 屬性文字方便語音合成器告知使用者,是在網頁中的哪一個區塊。每一個瀏覽器都有搜尋的功能,可以讓使用者搜尋所需資訊的地方。在 HTML 4.0 中 accesskey 的功能可以搭配 alt 鍵使用,跳到所需的區塊。請將網頁定位點(:::)搭配快速鍵的使用說明,描述於網站導覽或明顯處供使用者瞭解,請不要隱藏於 ::: 的連結處,以提供各種使用者使用。


了解完上面 NCC 對於無障礙的說明之後,發現要實現無障礙定位點,也就是俗稱的「導盲磚」,原理非常簡單,讓我們繼續往下看。

導盲磚

導盲磚其實是結合了兩個概念,「跳過連結」與「快速鍵」。跳過連結(Skip links or Skip Nav)功能的存在是因為在現今龐大的網站設計當中,我們會將最常用的連結,也就是網頁主結構的超連結(導覽列)放置在每一頁的頁首中(為了維持設計的一致性),而習慣使用鍵盤操作或是輔助裝置的使用者,透過鍵盤上的 tab 鍵 去移動網頁上的焦點,這時會造成使用上的巨大困難,因為超連結 <a> 是可以成為焦點的元素,使用者必須一個一個焦點慢慢的切換,才能到主內容區塊取得重要資訊。

這樣的操作流程對於鍵盤操作者來說,非常辛苦,因而在設計之初,便可以先設想好整個資訊架構於網頁呈現時該如何佈局,比如說假設資訊內容將依性質分為「導覽列、主要內容、側邊欄、頁尾」等區域的話,將各區域劃分清楚並給予 idaccesskey屬性,實踐 「跳過連結」與「快速鍵」,完成導盲磚功能。

通常會將導盲磚的介紹放置在網站導覽頁面(可參考 BBC 作法,喜歡!),此通往介紹的超連結會放在頁首,使用者可以在剛開始使用網站時,認識整體使用方法與整個網站結構,因為,若是視覺能力缺失的使用者,他們對於網站結構只能全憑想像。


跳過連結的原理

因為超連結 <a> 在設定 href 屬性時,值就是我們的參考,這個參考可以是其他頁面的 URI ,或是當前頁面的定位點,也就是某個區塊的 id,若是要導向至當前頁面的定位點,值會以 # 開頭。

<a href="#main" class="skip-nav">skip to main</a>
<main id="main">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet impedit officiis aut facilis assumenda ipsum suscipit fugiat eligendi. Nesciunt tempore magnam quis pariatur deserunt explicabo voluptatum eveniet tempora aperiam quidem.</main>

我們會將這個可以跳到主要內容的超連結,成為在 DOM 中第一個可被 focus 的元素。不過這個作法對於大多數的團隊來說,會認為這種做法喪失了品牌設計感,所以在此可以結合另一個視覺上隱藏元素的技巧,透過 CSS 將它隱藏在螢幕之外,然後在其獲得鍵盤焦點時(:focus)將其放置在螢幕上。

.skip-nav {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	// 可以在此設定基本樣式

	&:focus {
		 // 在這裡設定成為焦點時的位置
	}
}
  • 如果使用 display: none;visibility: hidden; 都會使元素從可視層(visual flow)移除,所以也會被螢幕閱讀器忽略。
  • 寬度 width 與高度 height 是設定容器的大小,若將值設為 0,也將被螢幕閱讀器設為不存在。
  • 上面的作法適用於現代各瀏覽器,當元素內容大於寬高 1px時,將被隱藏(overflow: hidden;)會剪掉(clip: rect(1px, 1px, 1px, 1px);)。

針對跳過連結的實作細節可以查看 WebAIM 的 "Skip Navigation" LinksCSS in Action: Invisible Content Just for Screen Reader Users 兩篇文章。


accesskey 如何實現

假設主要內容區塊分為:導覽列、主要內容、側邊欄、頁尾,可以為每個區塊加上 accesskey 屬性,值就是鍵盤上的按鍵,而 accesskey 是任何元素都可以使用的屬性,所以我們會偏向將它加在每個區塊的第一個超連結,讓每個區塊都可以成為焦點,讓我們可以在各個區塊間快速切換,而在超連結名稱上,我們搭配 :::作為超連結內容,以及 title 屬性說明如何操作。

注意!若 accesskey 的值是英文字母,有「大小寫」之分。

<nav><a id="nav" accesskey="U" title="常用快速鍵:ALT+U">:::</a> ... </nav>
<main><a id="main" accesskey="C">:::</a> ... </main>
<aside><a id="aside" accesskey="R">:::</a> ... </aside>
<footer>><a id="footer" accesskey="F">:::</a> ... </footer>

之後點擊鍵盤的快速鍵,就能切換區域的焦點,而鍵盤快速鍵因作業系統不同而有差異。

實踐 skip-nav 與 accesskey

將以上概念都結合之後,趕快來我的 codepen 操作看看,以及看看原始碼,如何用最簡單的概念實踐「導盲磚」。

accesskey 的注意事項

  • 同一個頁面,最多只能有四個定位點,否則使用者會很混肴。
  • accesskey 屬性因為可以套用到任何元素中,我們可以客製自己想要的快速鍵,可是因為沒有標準化,大家可以隨意客製,再加上各作業系統對於快速鍵的按法不一,使用者不會熟悉。
  • 更多的可能是,使用者幾乎不會知道開發者有設置快速鍵,因為在畫面上沒有任何顯示,我們除了可以在網站導覽頁面中設置說明、使用 title 屬性以外,還可以參考 Stuart Robertson 寫的此篇文章及 Andrew Beacock 的 Firefox hack to display "accesskey" keyboard shortcuts 來看看我們如何為快速鍵優雅的加上說明,如果是希望不顯示說明,而只讓螢幕閱讀器透過 Audio UI 念出來的話,使用 title 或是 aria-describedby="某元素id"

其實 accesskey 在國際網頁開發中,很少看見使用了,而也有很多不建議的說法,總歸原因為以下三點:

  • 不同的快捷方式值
  • 瀏覽器和屏幕閱讀器之間的衝突
  • 可發現性

針對這三點的說明都在以上內容提及了,雖然立意不錯,但這三點已經讓本來想要實踐無障礙的作法變得更難訪問,台灣目前還是將 accesskey列為無障礙做法之一,除非建立標準化,否則真的值得再思考。


Reference


上一篇
實作無障礙網頁功能:此 Switch 非彼 Switch,可訪問的雙狀態開關作法。
下一篇
實作無障礙網頁功能:無限捲軸之於訪問性的討論 Infinite Scroll(Feed)
系列文
實踐無障礙網頁設計(Web Accessibility)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言